<template>
  
    <el-container>
        <el-aside>

                <el-menu router>


                        <el-menu-item index="product">

                               <el-icon><search /></el-icon> 商品录入

                        </el-menu-item>
                        <el-menu-item index="test">

                               <el-icon><edit /></el-icon> 商品测试

                        </el-menu-item>
                        <el-menu-item index="login">

                               <el-icon><user /></el-icon> 用户登录

                        </el-menu-item>
                       

                      
                          <el-menu-item index="table">

                               <el-icon><delete /></el-icon> 表格测试

                        </el-menu-item>
                        <el-menu-item index="aggrid">

                               <el-icon><search /></el-icon> AGGRID测试

                        </el-menu-item>
                        <el-menu-item index="listproduct">

                               <el-icon><search /></el-icon> 数据展示

                        </el-menu-item>
                        <el-menu-item index="ck">

                               <el-icon><search /></el-icon> 商品出库

                        </el-menu-item>

                       



                </el-menu>


        </el-aside>


        <el-main>

                <RouterView />
        </el-main>

    </el-container>







</template>

<script setup>

import { RouterView } from 'vue-router';




</script>

<style  scoped>

.el-container{
    height: 100vh;
}

.el-main{
    padding: 0;
    margin: 0;
}

.el-menu {
  height: 100%;
}/* 主菜单样式 */
.el-menu {
  background-color: darkslategrey;
  border-right: none;
}

/* 菜单项和子菜单标题 */
.el-menu-item, .el-sub-menu__title {
  color: rgba(255, 255, 255, 0.65);
}

/* 悬停效果 */
.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: #333 !important;
  color: #fff !important;
}

/* 激活菜单项 */
.el-menu-item.is-active {
  background-color: #333 !important;
  color: #409EFF !important;
}

/* 子菜单样式 */
.el-sub-menu .el-menu {
  background-color: #0a0a0a !important;
}

/* 子菜单项 */
.el-sub-menu .el-menu-item {
  padding-left: 50px !important;
}

/* 展开的子菜单标题 */
.el-sub-menu.is-opened > .el-sub-menu__title {
  background-color: #333 !important;
}

/* 子菜单箭头图标 */
.el-sub-menu__title .el-sub-menu__icon-arrow {
  color: #666;
}
</style>